<template>
    <div>
      <div class="">
        <table class="table caption-top table-hover">
          <caption class="text-center">
            <h1>课程信息管理系统</h1>
            <el-button type="primary" @click="getCourse">获取信息</el-button>
            <el-button type="warning" @click="dialogVisible = true">添加课程信息</el-button>
  
            <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
              <div>添加课程信息</div>
              <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addCourse">添 加</el-button>
    </span>
              <div>
              <span>课程 ID</span><input v-model="newCourse.courseId"/>
              <div></div>
              <span>课程名称</span><input v-model="newCourse.courseName"/>
              <div></div>
              <span>课程类型</span><input v-model="newCourse.courseType"/>
              <div></div>
              <span>课程描述</span><input v-model="newCourse.courseDescription"/>
              <div></div>
  <!--            <span>id</span><input v-model.number="newCourse.math"/>-->
  <!--            <div></div>-->
  <!--            <span>id</span><input v-model.number="newCourse.eng"/>-->
  <!--            <div></div>-->
  <!--            <span>id</span><input v-model="newCourse.place"/>-->
              </div>
  
            </el-dialog>
          </caption>
          <thead>
          <tr>
            <th scope="col">课程ID</th>
            <th scope="col">课程名称</th>
            <th scope="col">课程类型</th>
            <th scope="col">课程描述</th>
  <!--          <th scope="col">描述</th>-->
  <!--          <th scope="col">描述</th>-->
  <!--          <th scope="col">diqu</th>-->
            <th scope="col">操作</th>
            <th></th>
          </tr>
          </thead>
          <tbody>
          <course v-for="cou in courses_for_page" :key="cou.id" :course="cou"></course>
          </tbody>
        </table>
        <div class="text-center">
          <el-button-group>
            <el-button type="primary" icon="el-icon-arrow-left" @click="last_page">上一页</el-button>
            <el-button type="primary" @click="next_page">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
          </el-button-group>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  import Course from "./CourseInfo.vue";
  export default {
    name: "courseInfos",
    components:{
      Course
    },
    data(){
      return{
        page:1,
        courses:[],
        dialogVisible: false,
        newCourse:{
          courseId:"",
          courseName:"",
          courseType:"",
          courseDescription:"",
          // math:"",
          // eng:"",
          // place:"",
        }
      }
    },
    methods:{
      getCourse(){
        axios({
          url:"http://localhost:8080/testcourse",
          method:'GET',
        }).then(res=>{
          console.log(res.data);
          this.courses= res.data;
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
            .then(() => {
              done();
            })
            .catch(() => {});
      },
      addCourse(){
        axios({
          url:"http://localhost:8080/add",
          method:"POST",
          data:this.newCourse
        })
        this.dialogVisible = false
      },
      next_page(){
        this.page += 1;
      },
      last_page(){
        this.page -=1;
      },
    },
  
    created() {
        this.getCourse();
    },
    computed:{
      courses_for_page(){
        return this.courses.slice(this.page*5 - 5,this.page*5)
      }
    }
  }
  </script>
  
  <style>
  </style>
  